// 注册界面，只能注册普通用户，用户名与手机号唯一
<template>
    <div class="form_wrapper">
        <el-form :model="registerForm" label-width="120px" :rules="registerRules" ref="registerForm">

            <el-form-item label="用户名" prop="username">
                <el-input v-model="registerForm.username" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="registerForm.password" type="password" />
            </el-form-item>

            <el-form-item label="重复密码" prop="passwordConfirm">
                <el-input v-model="registerForm.passwordConfirm" type="password" />
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
                <el-input v-model="registerForm.phone" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="register">注册</el-button>
                <el-button @click="toLogin">已有账号？前往登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {Request} from "../../utils/request"
import {ElMessage} from 'element-plus'

const reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

export default {
    name: 'PMSRegister',
    data() {
        return {
            registerForm: {
                username: '',
                password: '',
                passwordConfirm: '',
                phone: ''
            },
            registerRules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                phone: [
                    { pattern: reg_phone, message: '手机号不可用', trigger: 'blur' },
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                passwordConfirm: [{validator: this.pwdValidator, trigger: 'blur'}]
            }
        }
    },
    methods: {
        register() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    Request({
                        url: '/register',
                        method: 'post',
                        data: this.registerForm
                    }).then(res => {
                        if( typeof(res) === 'object' && 'permission' in res ) {
                            ElMessage({
                                message: '注册成功',
                                type: 'success',
                                duration: 1000
                            })
                            sessionStorage.setItem('username', this.registerForm.username)
                            this.$router.push('/home/' + this.registerForm.username)
                        }
                        else {
                            ElMessage({
                                message: res,
                                type: 'error',
                                duration: 3 * 1000
                            })
                        }
                    })
                }
            })
        },
        toLogin() {this.$router.push('/login')},
        pwdValidator(rule, value, callback) {
            if (value !== this.registerForm.password) {
            callback(new Error("与密码不一致"))
            } else {
                callback()
            }
        }
    }    
}
</script>

<style scoped>
.form_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--el-color-primary-light-7);
}
</style>